<template>
	<view class="content">
		<!-- bg -->
		<view style="height: 808rpx; width: 100vw;position: relative;">
			<swiper style="width: 100%; height: 100%">
				<swiper-item v-for="(item, index) in inits.banner" :key="index"
					style="width: 100%; height: 100%">
					<!-- poster封面 -->
					<video v-if="isVideoFile(item)" id="myVideo" :src="item" style="width: 100%; height: 100%"
						object-fit="cover" :muted="muted" autoplay loop :show-fullscreen-btn="false"
						:enable-progress-gesture="false" />
					<image v-else style="width: 100%; height: 100%" :src="item"></image>
				</swiper-item>
			</swiper>
			<view @click="onMuted"
				style="position: absolute;right: 40rpx;border: 1px solid #fff;border-radius: 50%;width: 80rpx;height: 80rpx;bottom: 50rpx;"
				class="flex flex-ai-c flex-jc-c">
				<image style="width: 80rpx;height: 80rpx;" :src="muted?'/static/image/off-Sound.png':'/static/image/Open_Sound.png'"/>
			</view>
		</view>
		<!-- search -->
		<!-- <view style="position: absolute;top: 632rpx;width: 702rpx;z-index: 3;margin: 0 24rpx;">
			<dateFilter :calendarData="inits.calendarData" @search="search" />
		</view> -->
		<view>
			<cityList isMore @click="clickCity" />
		</view>
		<!-- 占位 -->
		<!-- <view class="zw"></view> -->
		<view style="padding: 40rpx 24rpx" class="flex flex-ai-c">
			<view style="width: 6rpx; height: 34rpx; background: #009943"></view>
			<view class="font-34 ml-10" style="font-weight: 500">康养基地</view>
		</view>
		<!-- tag -->
		<view style="padding: 0 24rpx 87rpx 24rpx">
			<scroll-view scroll-x class="tag">
				<view class="flex scroll-view-for">
					<view v-for="(item, i) in inits.tagList" :key="i" @click="inits.tagIndex = i">
						<view class="tag-list" :class="[inits.tagIndex === i ? 'tag-active' : 'tag-default']">
							{{ item.h_name }}
						</view>
					</view>
				</view>
			</scroll-view>
			<swiper class="album" :current="inits.current" @change="swiperChange" v-if="inits.tagList[inits.tagIndex]">
				<swiper-item v-for="(item, index) in inits.tagList[inits.tagIndex].h_image_arr" :key="index"
					style="width: 100%; height: 100%"
					@click="jump(`/pages/hotel/details/index?id=${inits.tagList[inits.tagIndex].id}`)">
					<image mode="aspectFill" :src="item" style="height: 100%; width: 100%"></image>
					<view class="flex flex-jc-sb plr-24 font-20 mask">
						<view class="mt-11 s-line-text desc-1">
							{{ inits.tagList[inits.tagIndex].h_image_tag }}
						</view>
						<view class="mt-11">
							<u-icon name="arrow-right" color="#FFFFFF" size="24rpx" />
						</view>
					</view>
				</swiper-item>
			</swiper>

			<template v-if="inits.tagList[inits.tagIndex] && inits.tagList[inits.tagIndex].ad.length">
				<view class="album flex" style="height: 220rpx; overflow-x: auto; overflow-y: hidden">
					<view v-for="(item, i) in inits.tagList[inits.tagIndex].ad[0].ad_content_images || []" :key="i"
						style="width: 220rpx; margin-right: 24rpx" @click="jump(item.path)">
						<image mode="aspectFill" :src="item.image_url" style="height: 100%; width: 220rpx"></image>
						<view class="flex flex-jc-sb font-20 mask" style="width: 220rpx; padding: 25rpx 0 0 0">
							<text class="s-line-text desc-1 mr-10 ml-15">{{ item.flag }}</text>
						</view>
					</view>
				</view>
			</template>

			<!-- vip -->
			<view class="vip">
				<view class="flex flex-ai-c flex-jc-sb" style="padding: 31rpx 20rpx 0 20rpx">
					<view class="flex flex-ai-c">
						<view class="font-34 mr-15" style="font-weight: 500">您的专属权益</view>
						<view class="vip-tag">{{ inits.info.m_level }}</view>
					</view>
					<view class="flex flex-ai-c" @click="jump(`/pages/vip/index`)">
						<view>更多</view>
						<u-icon name="arrow-right" color="#333333" size="32rpx" />
					</view>
				</view>
				<view class="flex flex-jc-sa flex-ai-c">
					<view v-for="(item, i) in inits.vipList" :key="i" style="margin: 41rpx 0 49rpx 0"
						class="flex flex-dir-c flex-ai-c">
						<i-icon :icon="item.icon" size="35rpx" />
						<view class="vip-name mt-18">{{ item.name }}</view>
					</view>
				</view>
			</view>

			<!-- 精选活动 -->
			<view class="mt-60">
				<view class="title">精选活动</view>
				<activeList :list="inits.activity" />
			</view>
		</view>
	</view>
	<view style="height: 148rpx"></view>
	<tabbar :current="0" />
</template>

<script lang="ts" setup>
	import { reactive, computed, ref } from 'vue';
	import { onLoad, onShow, onPullDownRefresh, onShareAppMessage } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	import cityList from '@/components/cityList.vue';
	import activeList from '@/components/activeList.vue';
	import common from '../../api/common.js';
	import getLocation from '../../utils/location.js';
	import { calender } from '../../utils/getCalender.js';
	import share from '../../utils/share.js';
	const store = useStore();
	const inits : any = reactive({
		info: {
			m_level: '注册会员',
			id: null,
			...uni.getStorageSync('userInfo')
		},
		current: 0,
		// tag
		tagList: [],
		tagIndex: 0,
		// vip
		vipList: [
			{ name: '专属礼遇', icon: 'icon-menpiao' },
			{ name: '预订9.2折', icon: 'icon-zhekou' },
			{ name: '预订保留', icon: 'icon-bedroom' },
			{ name: '分享佣金', icon: 'icon-yongjin' }
		],
		// 精选活动
		activity: [],
		// 选择日期
		calendarData: {
			start: {
				month: '00',
				day: '00',
				weekText: ''
			},
			end: {
				month: '00',
				day: '00',
				weekText: ''
			},
			diff: 1
		},
		banner: { content: [''] }
	});
	const provice = computed(() => store.state.provice);
	let muted = ref(true)
	const jump = (url : string) => {
		uni.navigateTo({
			url: url
		});
	};
	const onMuted = () => {
		muted.value = !muted.value
	}
	const clickCity = (v : AnyObject) => {
		if (v.provice == '更多') {
			store.commit('SET_REGION', '');
		} else {
			store.commit('SET_REGION', v.provice);
		}
		uni.switchTab({
			url: '/pages/tabs/schedule'
		});
	};
	function isVideoFile(filename) {
		filename = typeof filename === 'string' ? filename : '';
		// 常见视频格式扩展名
		const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm'];

		// 获取文件扩展名（转小写）
		const ext = filename.split('.').pop().toLowerCase();

		return videoExtensions.includes(ext);
	}
	const swiperChange = (v : any) => {
		inits.current = v.detail.current;
	};
	const search = (data) => {
		// console.log(data)
	};
	const getBanner = async () => {
		const res = await common.getBanner({ flag: 1 });
		if (res.code !== 200 || !res.data.length) return;
		inits.banner = res.data[0].content
	};
	const location = (isModal = true) => {
		getLocation(isModal)
			.then((res) => {
				store.commit('Addr', res);
				indexInfo(res.city);
			})
			.catch((err) => {
				store.commit('Addr', err.city);
				indexInfo(err.city);
				console.log(err);
			});
	};
	const indexInfo = async (city) => {
		const res = await common.indexInfo({
			city: city,
			keyword: ''
		});
		inits.tagList = res.data.hotel_list;
		inits.activity = res.data.activity;
		uni.stopPullDownRefresh();
	};
	const getTomorrowDate = () => {
		const res = calender();
		inits.calendarData.start = res.now;
		inits.calendarData.end = res.tomorrow;
		store.commit('CalendarData', {
			...inits.calendarData,
			start: inits.calendarData.start,
			end: inits.calendarData.end
		});
	};
	onShow(() => {
		if (store.state.calendarData) inits.calendarData = store.state.calendarData;
	});
	onLoad(() => {
		// getTomorrowDate();
		location();
		getBanner();
	});
	onPullDownRefresh(() => {
		inits.tagList = [];
		inits.activity = [];
		inits.banner = [];
		location();
		getBanner();
	});
	onShareAppMessage(() => {
		return share();
	});
</script>
<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.mt-11 {
		margin-top: 11rpx;
	}

	.line {
		padding: 0 20rpx 0;
		display: inline-block;
		line-height: 1rpx;
		border-left: 40rpx solid #333;
		border-right: 40rpx solid #333;
		text-align: center;
		margin: 0 20rpx;
	}

	.zw {
		height: 268rpx;
		margin-bottom: var(--status-bar-height);
		/* #ifdef H5 */
		margin-bottom: 40px;
		/* #endif */
	}

	.content {
		position: relative;

		.tag {
			.tag-list {
				width: 182rpx;
				height: 60rpx;
				border-radius: 6rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;
				font-weight: 400;
				margin-right: 10rpx;
			}

			.tag-active {
				background: #009943;
				color: #fff;
			}

			.tag-default {
				color: #999999;
				background: #fffffb;
			}
		}

		.mask {
			position: absolute;
			bottom: 0;
			color: #ffffff;
			width: 100%;
			height: 58rpx;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, #000000 100%);
		}

		.album {
			height: 350rpx;
			position: relative;
			margin-top: 23rpx;
		}

		.vip {
			margin-top: 30rpx;
			background: #fffffb;
			border-radius: 6rpx;

			.vip-name {
				font-weight: 500;
				font-size: 20rpx;
				color: #333333;
			}

			.vip-tag {
				width: 98rpx;
				height: 32rpx;
				background: #009943;
				border-radius: 4rpx;
				font-size: 18rpx;
				color: #fff;
				text-align: center;
				line-height: 32rpx;
			}
		}
	}

	.scroll-view-for>view:last-child .tag-list {
		margin-right: 0 !important;
	}

	.scroll-view-for>view:first-child .tag-list {
		margin-left: 0 !important;
	}
</style>